<template>
  <a-card :bordered="false" >
    <div>
      <!--树-->
      <div style="width: 190px;display: inline-block;">
        <a-directory-tree multiple default-expand-all  @select="clickTree" >
          <a-icon slot="switcherIcon" type="down" />
          <!--展示一级标题-->
          <a-tree-node :key=1 title="所有商品">
            <!--展示二级标题-->
            <template v-if="treeList1.length!=0">
                <a-tree-node :key=item1.goodsTypeId :title=item1.goodsTypeName v-for="item1 in treeList1">
                  <!--展示三级标题-->
                  <template v-if="treeList2.length!=0">
                    <template v-for="item2 in treeList2">
                      <template v-if="item2.pid==item1.goodsTypeId">
                      <a-tree-node :key=item2.goodsTypeId :title=item2.goodsTypeName />
                      </template>
                    </template>
                  </template>
                </a-tree-node>
            </template>
          </a-tree-node>
        </a-directory-tree>
        <!--表格-->
        <br/>
      </div>
      <!--表-->
      <div style="width: 895px;float: right">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="9" :lg="7" :md="8" :sm="24">
                <a-form-item label="商品名称">
                  <a-input placeholder="请输入商品名称" v-model="key"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="handleAdd" type="primary" icon="plus" style="margin-left: 20px" >新增</a-button>
            </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!--表格-->
        <a-table :data-source="tablelist"
                 :pagination="pagination"
                 size="small"
                 bordered
                 class="j-table-force-nowrap">
          <a-table-column title="操作"  width="50px" align="center">
            <template slot-scope="text, record,index">
              <a @click="editTable(record.goodsTypeId)">修改</a>
              <a-divider type="vertical"/>
                    <a-popconfirm title=  "确定删除吗?" @confirm="() => detailsDelete(record.goodsId)">
                      <a>删除</a>
                    </a-popconfirm>
            </template>
          </a-table-column>
          <a-table-column title="序号" data-index="index"   align="center">
          <template slot-scope="text, record,index">
            <span>{{index+1}}</span>
          </template>
          </a-table-column>
          <a-table-column title="编号"  data-index="goodsId"  align="center"/>
          <a-table-column title="商品编码" data-index="goodsCode"   align="center"/>
          <a-table-column title="商品名称" data-index="goodsName"   align="center"/>
          <a-table-column title="型号" data-index="goodsModel"   align="center"/>
          <a-table-column title="类别" data-index="goodsType.goodsTypeName"   align="center"/>
          <a-table-column title="单位" data-index="goodsUnit"   align="center"/>
          <a-table-column title="采购价" data-index="purchasingPrice"   align="center"/>
          <a-table-column title="出售价" data-index="sellingPrice"   align="center"/>
          <a-table-column title="库存" data-index="minNum"   align="center"/>
          <a-table-column title="生产厂商" data-index="goodsProducer"  align="center"/>
        </a-table>
        <!--分页-->
        <br/>
        <template>
          <a-pagination v-model="pageNo" :total="total" :pageSize="pageSize"  @change="gettable"   show-less-items />
        </template>
      </div>
    </div>
    <!--表单-->
    <div>
      <!--新增表单-->
      <a-modal v-model="addVisible" title="新增" @ok="addGoods" @cancel="addCancel" width="70%">
        <a-form-model :model="addGoodsFormData" :label-col="labelCol" :wrapper-col="wrapperCol"  ref="addsure" @keyup.enter.native="addGoods">
          <a-row style="margin-top:-10px;margin-bottom: 10px">
            <a-col :span="12" style="font-size: 16px;font-weight: bolder;color: #666">
              基本信息:
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="商品编码：" >
                <a-input v-model="addGoodsFormData.goodsCode" placeholder="商品编码" allowClear/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="商品名称："  prgop="teacherNo">
                <a-input v-model="addGoodsFormData.goodsName" placeholder="商品名称" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="型号：">
                <a-input v-model="addGoodsFormData.goodsModel" placeholder="型号" allowClear/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="类别：">
                <a-input v-model="addGoodsFormData.goodsTypeName" placeholder="类别" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="单位：">
                <a-input v-model="addGoodsFormData.goodsUnit" placeholder="单位" allowClear/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="采购价：">
                <a-input v-model="addGoodsFormData.purchasingPrice" placeholder="采购价" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="出售价：">
                <a-input v-model="addGoodsFormData.sellingPrice" placeholder="出售价" allowClear/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="库存：">
                <a-input v-model="addGoodsFormData.minNum" placeholder="库存" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="生产厂商：">
                <a-input v-model="addGoodsFormData.goodsProducer" placeholder="生产厂商" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
      <!--修改表单-->
      <a-modal v-model="editVisible" title="修改" @ok="addGoods" @cancel="addCancel" width="70%">
        <a-form-model :model="editGoodsFormData" :label-col="labelCol" :wrapper-col="wrapperCol"  ref="addsure" @keyup.enter.native="addGoods">
          <a-row style="margin-top:-10px;margin-bottom: 10px">
            <a-col :span="12" style="font-size: 16px;font-weight: bolder;color: #666">
              基本信息:
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="商品编码：" >
                <a-input v-model="editGoodsFormData.goodsCode" placeholder="商品编码" allowClear/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="商品名称："  prgop="teacherNo">
                <a-input v-model="editGoodsFormData.goodsName" placeholder="商品名称" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="型号：">
                <a-input v-model="editGoodsFormData.goodsModel" placeholder="型号" allowClear/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="类别：">
                <a-input v-model="editGoodsFormData.goodsTypeName" placeholder="类别" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="单位：">
                <a-input v-model="editGoodsFormData.goodsUnit" placeholder="单位" allowClear/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="采购价：">
                <a-input v-model="editGoodsFormData.purchasingPrice" placeholder="采购价" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="出售价：">
                <a-input v-model="editGoodsFormData.sellingPrice" placeholder="出售价" allowClear/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="库存：">
                <a-input v-model="editGoodsFormData.minNum" placeholder="库存" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="生产厂商：">
                <a-input v-model="editGoodsFormData.goodsProducer" placeholder="生产厂商" allowClear/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </div>
  </a-card>
</template>
<script>
  import {axios} from "../../../../utils/request";
  export default {
    name: "GoodsManager",
    data(){
      return{
        //---------------------------------------------查询----
        key:'',
        //-------------------------------------------树结构-----
        treeList1:[],//二级目录数据
        treeList2:[],//三级目录数据
        seleckedKeyIds:[],//已点击的树节点
        tree:false,
        seleckedKey:null,
        treeList1Id:[],
        //---------------------------------------------表格------
        tablelist:[],//表格数据
        pagination:false,//关闭表格自带分页
        selectedRowKeys:[],//多选框选中的数据
        pageNo:1,
        pageSize:10,
        total:0,
        //---------------------------------------------新增表单--------
        addVisible:false,//新增表单开关
        labelCol: {
          xs: { span: 12 },//该行数据宽度占整行的所有
          sm: { span: 5 },//文字左边距，搜索框左边距
        },
        wrapperCol: {
          xs: { span: 12 },
          sm: { span: 12 },//输入框长度
        },
        //新增表单数据
        addGoodsFormData:{
          goodsCode:'',
          goodsName:'',
          minNum:'',
          goodsModel:'',
          goodsProducer:'',
          purchasingPrice:'',
          sellingPrice:'',
          goodsUnit:'',
          goodsTypeName:''
        },
        //------------------------------------------------------------------修改表单------
        editVisible:false,
        //修改表单数据
        editGoodsFormData:{
          goodsCode:'',
          goodsName:'',
          minNum:'',
          goodsModel:'',
          goodsProducer:'',
          purchasingPrice:'',
          sellingPrice:'',
          goodsUnit:'',
          goodsTypeName:''
        },
      }
    },
    methods: {
      //--------------------------------------------------------------------------------表单--------
      //新增表单回车、确定
      addGoods(){
        let goods = this.addGoodsFormData;
        axios({
          url:"goods/updateGoods",
          method:"post",
          data:{
            goods:goods,
          }
        }).then((resp)=>{
          if (resp==true){
            this.$message.success("新增成功")
          }else {
            this.$message.error("新增失败");
          }
          this.gettable(this.pageNo);
        })
      },
      //取消、叉叉表单事件
      addCancel(){

      },
      //---------------------------------------------------------------------------------树节点区域------
      //点击树节点，selectedKeys是一个数组，selectedKeys[0]代表本次点击的树节点的key
      clickTree(selectedKeys){
        axios({
          url: "goods-type/getByParentId/"+selectedKeys,
          method: "get"
        }).then((resp) => {
          if (resp) {
            //如果已选择容器中没有该选择项
            if (!this.seleckedKeyIds.includes(selectedKeys[0])){
              //将点击的key加入该容器中
              this.seleckedKeyIds.push(selectedKeys[0]);
              //将该点击的key传回的数据加入数组中，点击的key=1证明是1级节点，其他都是点击的二级节点的数据
              if (selectedKeys[0]==1){
                this.treeList1 = resp;
              }else {
                for (let i = 0; i < resp.length; i++) {
                  //将数据放入数组中
                  this.treeList2.push(resp[i]);
                }
                console.log(this.treeList2)
              }
            }

          }else {
            this.$message.error(resp.message);
          }
        });
        this.tree = true;
        this.seleckedKey = selectedKeys[0];
        this.gettable(1);
      },
      //将treelist1的所有对象的id放入数组中
      setInArray(){
        for (let i = 0; i < this.treeList1.length; i++) {
          this.treeList1Id.push(this.treeList1[i].goodsTypeId)
        }
      },
      //---------------------------------------------------------------------------------查询区域---------
      //查询事件
      searchQuery(){
        this.gettable(1)
      },
      //新增按钮
      handleAdd(){
        this.addVisible = true;
      },
      //-----------------------------------------------------------------------------------表格区域--------
      //删除按钮
      detailsDelete(id){
        axios({
          url:"goods/deleteGoods/"+id,
          method:"delete"
        }).then((resp)=>{
            if (resp==true){
              this.$message.success("删除成功")
            }else {
              this.$message.error("删除失败");
            }
            this.gettable(this.pageNo);
        })
      },
      //修改按钮
      editTable(id){
        this.editVisible = true;
        axios({
          url:"goods/getGoodsById/"+id,
          method:"get",
        }).then((resp)=>{
          if (resp){
            console.log();
            this.editGoodsFormData = resp;
          }else {
            this.$message.error("删除失败");
          }
        })
      },
      //表格数据
      gettable(pageNo) {
        //判断是树点击的表，还是查询的表
        //如果树被点击了，且不是1级2级目录节点（是具体分类）
        this.setInArray();
        let b1 = this.tree==true;
        let b2 = this.treeList1!=null;
        let b3 = this.treeList1Id.includes(this.seleckedKey)==true?false:true&&this.seleckedKey!=1;
        //TODO 小伙子，没问题啊
        if (b1&&b2&&b3){
          axios({
            url: "goods/treeGetGoods",
            method: "get",
            params:{
              pageNo:pageNo,
              pageSize: this.pageSize,
              goodsTypeId:this.seleckedKey,
            }
          }).then((resp) => {
            if (resp) {
              this.tablelist = resp.records;
              this.total=resp.total;
              this.pageNo=resp.current;
            } else {
              this.$message.error(resp.message);
            }
          });
          this.tree = false;
        }else {
          //非树查询表
          axios({
            url: "goods/getGoodsAndType",
            method: "get",
            params:{
              pageNo:pageNo,
              pageSize: this.pageSize,
              key:this.key
            }
          }).then((resp) => {
            console.log(resp)
            if (resp) {
              this.tablelist = resp.records;
              this.total=resp.total;
              this.pageNo=resp.current;
            } else {
              this.$message.error(resp.message);
            }
          })
        }

      },
    },
    //---------------------------------------------------------------------------------页面初始化方法------
    // 编写页面加载时执行的代码
    created(){
      this.gettable(1);
    },
    mounted() {

    }
  };
</script>

<style scoped>

</style>